<script>
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";
export default {
  data() {
    return {
      tableData: [],
      form: {},
      pojo: {},
      dialogFormVisible: false,
      pcaTextArr,
      selectedOptions: [],
      title: "",
      selectedConsignee: null,
      uid:1,


    }
  },
  watch: {
    selectedConsignee(newVal) {
      // 当 selectedConsignee 变化时，执行相关操作
      console.log('选中的收货地址ID:', newVal);
      // 这里可以进一步处理，像是发起请求获取对应地址的详细信息
      // 或进行其他业务逻辑操作
    }
  },
  mounted() {
    this.fetchAddresses(); // 获取地址列表的方法
  },
  methods: {

    // 获取地址列表 设置默认地址
    fetchAddresses() {
      // 假设有获取地址的 API 调用
      this.axios.get('http://localhost:9000/placeOrder/receiving-address/addresses').then(response => {
        this.addressList = response.data;

        // 找到默认地址并设置 selectedConsignee
        const defaultAddress = this.addressList.find(address => address.defaultAddress === 1);
        if (defaultAddress) {
          this.selectedConsignee = defaultAddress.id; // 将默认地址的 ID 赋值给 selectedConsignee
        }
      });
    },

    //查询用户的收货地址
    find(){
      this.axios.post('http://localhost:9000/placeOrder/receiving-address/find?uid='+this.uid).then(res => {
        this.tableData = res.data;
      })
    },

    Add() {
      this.dialogFormVisible = true;
      this.pojo = {};
      this.title = '添加收货地址';
    },
    change() {
      this.pojo.address = this.pojo.address.join(',');
      this.pojo.defaultAddress = this.pojo.defaultAddress? 1 : 0;
      this.pojo.uid = this.uid;
      this.axios.post('http://localhost:9000/placeOrder/receiving-address/change', this.pojo).then(res => {
        if(res.data.code === 1){
          this.$message.success('成功');
          this.dialogFormVisible = false;
          this.find();
        }else {
          this.$message.success('成功');
          this.dialogFormVisible = false;
          this.find();
        }
      })
    },
    Update(row) {
      console.log(row)
      this.dialogFormVisible = true;
      this.pojo = row;
      this.pojo.address = this.pojo.address.split(',');
      this.pojo.defaultAddress = this.pojo.defaultAddress == 1? true : false;
      this.title = '编辑收货地址';
      this.find();
    },

    fh() {
      localStorage.setItem("dz", JSON.stringify(this.selectedConsignee));
      this.$router.push('/Confirm_order');
    },

    //手机号验证
    checkPhoneNumber() {
      const phoneReg = /^1[3-9]\d{9}$/;
      if (phoneReg.test(this.pojo.phone)) {
        this.$message.success('手机号格式正确');
      } else {
        this.$message.error('手机号格式错误');
      }
    }


  },
  created() {
    this.find();
  },

}
</script>

<template>
<div style="margin: 0 auto; background-color: #f2f2f2; width: 500px; height: 800px;overflow: hidden;border-radius: 10px;">
  <div><img src="https://spyx-10a.oss-cn-beijing.aliyuncs.com/2024/11/12/img.png" width="100%" height="30px" style="border-radius: 10px 10px 0 0;"></div>
  <img src="https://spyx-10a.oss-cn-beijing.aliyuncs.com/2024/11/12/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20241121155729.png" @click="fh()" style="padding-top: 20px;margin-left: 30px; width: 30px; height: 30px;  float: left;">
  <p style="text-align: center; font-size: 20px;padding: 20px 0;">收货地址</p>

<!--  <el-button type="primary" @click="fh()">返回</el-button>-->
  <template>
    <el-table
        :data="tableData"
        style="width: 99%; margin: 0 auto">
      <el-table-column>
        <template slot-scope="scope">
          <div style="float: left; width: 90%;">
            <div>
              <el-radio
                  v-model="selectedConsignee"
                  :label="scope.row.id"
              style="margin-right: 10px;">
              </el-radio>
              <span style="padding-right: 10px">{{ scope.row.consignee }}</span>
              <span style="padding-right: 10px">{{ scope.row.phone }}</span>
              <span v-if="scope.row.defaultAddress === 1" class="default-tag">默认</span>
              <span style="padding-left: 10px">{{ scope.row.addressLabel }}</span>
            </div>
            <div>
              <span>{{ scope.row.address }}</span>
              <span style="padding-left: 10px">{{ scope.row.detailedAddress }}</span>
            </div>
          </div>

<!--          <el-button type="text" @click="Update(scope.row)">编辑</el-button>-->
          <img src="https://spyx-10a.oss-cn-beijing.aliyuncs.com/2024/11/12/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20241119155257.png" @click="Update(scope.row)" style="width: 30px; height: 30px;  float: right;">
        </template>
      </el-table-column>
    </el-table>
  </template>
  <el-button @click="Add()" style="margin-top: 20px; width: 88%; background-color: #666666; color: #ffffff;">创建地址</el-button>

  <el-dialog :title='title' :visible.sync="dialogFormVisible" width="400px" >
    <el-form :model="pojo" >

      <el-form-item label="收货人">
        <el-input v-model="pojo.consignee"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="pojo.phone" @blur="checkPhoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="选择地址">
        <el-cascader
            size="large"
            :options="pcaTextArr"
            v-model="pojo.address">
        </el-cascader>
      </el-form-item>
      <el-form-item label="详情地址">
        <el-input v-model="pojo.detailedAddress"></el-input>
      </el-form-item>

      <el-form-item label="地址标签">
        <el-form-item label="地址标签">
          <el-radio-group v-model="pojo.addressLabel">
            <el-radio label="家">家</el-radio>
            <el-radio label="公司">公司</el-radio>
            <el-radio label="学校">学校</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form-item>

      <el-form-item label="设置为默认地址">
        <el-switch v-model="pojo.defaultAddress"></el-switch>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="change()">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<style>
.default-tag {
  background-color: #e6e6e6;
  padding: 2px 5px;
  border-radius: 3px;
}
</style>